<template>
	<view class="home-hot">
		<view class="title">
			最受期待电影
		</view>
		<view class="show-list">
			<view class="show-list-all">
				<view class="show-list-item" v-for="(item,index) in movieList" :key="index" @click="toDetail(item)">
					<view class="img-box">
						<image class="img" :src="item.img" mode="aspectFit"></image>
					</view>
					<view class="my-text name">
						{{item.nm}}
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<home-item v-for="(item,index) in orderList" :key="index" :item="item"></home-item>
			<view class="more">
				{{allIds.length?"加载中...":"没有更多了"}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getMostExpected,
		getComingList
	} from "@/api/index.js";
	import {
		ref,
		watch,
		onMounted
	} from "vue";
	import {useGlobalStore} from "@/stores/global.js";
	const store = useGlobalStore();
	const props = defineProps(["getMore"]);
	const movieList = ref([]);
	const orderList = ref([]);
	const allIds = ref([]);
	const getData = async()=>{
		let res1 = await getMostExpected(store.city.id);
		movieList.value = res1.data.coming;
		let res2 = await getComingList(store.city.id);
		console.log(res2);
		allIds.value = res2.data.movieIds;
		orderList.value = res2.data.coming;
		console.log(orderList.value);
	}
	watch(()=>store.city.id,()=>{
		getData();
	});
	onMounted(async () => {
		getData();
	});
	watch(() => props.getMore, async () => {
		allIds.value = allIds.value.slice(10, );
		if (allIds.value == []) return;
		let res = await getComingList(store.city.id,allIds.value);
		orderList.value = [...orderList.value, ...res.data.coming];
	});
	const toDetail = (item)=>{
		uni.navigateTo({
			url:`/pages/movie-detail/movie-detail?movieId=${item.movieId}`
		});
	}
</script>

<style lang="scss" scoped>
	.home-hot {
		width: 100%;
		box-sizing: border-box;
		background-color: var(--gray3);

		&::-webkit-scrollbar {
			display: none;
		}

		>view {
			background-color: var(--white);
			padding: 0 30rpx;
		}

		.title {
			padding-top: 20rpx;
			color: var(--gray);
		}

		.show-list {
			width: 100%;
			overflow: scroll;
			box-sizing: border-box;
			padding: 20rpx 0;

			&::-webkit-scrollbar {
				display: none;
			}

			.show-list-all {
				width: max-content;
				display: flex;

				.show-list-item {
					width: 200rpx;
					margin-right: 20rpx;

					.img-box {
						width: 100%;
						height: 268rpx;

						.img {
							width: 100%;
							height: 100%;
							display: block;
						}
					}

					.name {
						font-size: 30rpx;
						color: var(--black);
						margin-top: 20rpx;
						text-align: center;
						font-weight: bold;
					}
				}
			}
		}

		.content {
			margin-top: 20rpx;
			padding-bottom: 100rpx;

			.more {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>